<template>
  <div class="coordinate-box d-flex ai-c">
    <div
      class="coordinate-text"
      v-html="coordinate"
    />
    <!-- <el-divider direction="vertical" /> -->
    <span>层级：  {{ Math.floor(zoom) }}</span>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'PointerCoorinates',
  computed: {
    ...mapState('map', ['pointer', 'zoom']),
    coordinate () {
      let latitude = ''
      let longitude = ''
      if (!this.pointer.length) {
        longitude = '0 E'
        latitude = '0 N'
        return longitude + '<span class="m-r-mini"></span>' + latitude
      }
      longitude = this.pointer[0] >= 0 ? '<div class="location-list"><span class="location">东经：</span>' + this.pointer[0].toFixed(6) + '</div>' : '<div class="location-list"><span class="location">西经：</span>' + Math.abs(this.pointer[0]).toFixed(6) + '</div>'
      latitude = this.pointer[1] >= 0 ? '<div class="location-list"><span class="location">北纬：</span>' + this.pointer[1].toFixed(6) + '</div>' : '<div class="location-list"><span class="location">南纬：</span>' + Math.abs(this.pointer[1]).toFixed(6) + '</div>'
      return longitude + latitude
    }
  },
  beforeDestroy () {
    const mapComponent = this.$mapManager.getMapComponent()
    const view = mapComponent.map1.getView()
    this.$store.commit('map/setZoom', view.getZoom())
  }
}
</script>

<style lang="scss" scoped>
.coordinate-box {
  position: absolute;
  box-shadow: 0 0 9px 0 #2457b0 inset;
  background: rgba(8, 34, 129, 0.5);
  height: auto;
  line-height: 18px;
  border-radius: 4px;
  // color: #ffffffd0;5.6修改
  color: #424e61;
  font-size: 12px;
  padding: 4px 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  .coordinate-text {
    display: flex;
    flex-direction: column;
    line-height: 18px;
    align-items: flex-end;

    ::v-deep .location-list {
      width: 100px;
      position: relative;
      padding-left: 36px;
      text-align: right;

      span.location {
        width: 48px;
        display: inline-flex;
        position: absolute;
        z-index: 1;
        left: 0;
      }
    }
  }
}

</style>
